<template>
  <div style="color: red">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="功能角色" name="functionRole">
        <function-role></function-role>
      </el-tab-pane>
      <!-- <el-tab-pane label="数据角色" name="dataRole"
        ><data-role></data-role>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
// import DataRole from "./components/rightManage/DataRole.vue";
import FunctionRole from "./components/rightManage/FunctionRole.vue";
export default {
  components: {
    // DataRole,
    FunctionRole,
  },
  data() {
    return {
      // activeIndex: "/functionRole",
      activeName: "functionRole",
    };
  },

  methods: {
    handleSelect() {},

    handleTabClick(tab, event) {
      console.log(tab.name, event);
      this.activeName = tab.name;
    },
  },
};
</script>

<style>
.el-menu {
  background: transparent;
  color: #fff;
}

.el-menu-item.is-active,
.el-menu-item:hover {
  background-color: transparent !important;
}
.el-menu.el-menu--horizontal {
  border-bottom: solid 1px #3b3e42;
}
.el-tabs__nav-wrap::after {
  background: #3b3e42;
}
.el-tabs__item {
  color: #fff;
}
.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #5cfbff;
}
.el-tabs__active-bar {
  background: #5cfbff;
}
</style>